<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>确认订单</p>
		</header>
		
		<!-- 订单信息部分 -->
		<div class="order-info">
			<h5>订单配送至：</h5>
			<div class="order-info-address" @click="toUserAddress">
				<p>{{deliveryAddress != null ? deliveryAddress.address : '请选择送货地址'}}</p>
				<i class="fa fa-angle-right"></i>
			</div>
			<p>{{deliveryAddress != null ? `${deliveryAddress.contactName}${deliveryAddress.contactSex === 1 ? '先生' : '女士'} ${deliveryAddress.contactTel}` : '请先选择送货地址'}}</p>
		</div>
		
		<h3>{{business.businessName}}</h3>
		
		<!-- 订单明细部分 -->
		<ul class="order-detailed">
			<li v-for="item in cartArr" :key="item.id">
				<div class="order-detailed-left">
					<img :src="item.food?.foodImg || defaultFoodImg" @error="handleImageError">
					<p>{{item.food?.foodName}} x {{item.quantity}}</p>
				</div>
				<p>&#165;{{(item.food?.foodPrice * item.quantity).toFixed(2)}}</p>
			</li>
		</ul>
		
		<div class="order-deliveryfee">
			<p>配送费</p>
			<p>&#165;{{business.deliveryPrice || 0}}</p>
		</div>
		
		<!-- 合计部分 -->
		<div class="total">
			<div class="total-left">
				&#165;{{totalPrice}}
			</div>
			<div class="total-right" @click="toPayment" :style="isCreatingOrder ? 'background-color: #cccccc; cursor: not-allowed;' : ''">
				{{isCreatingOrder ? '创建中...' : '去支付'}}
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Orders',
		data() {
			return {
				businessId: this.$route.query.businessId,
				business: {},
				user: {},
				cartArr: [],
				deliveryAddress: null,
				isCreatingOrder: false,
				defaultFoodImg: require('../assets/default-food.png')
			}
		},
		async created() {
			this.user = this.$getSessionStorage('user');
			
			// 验证用户信息
			if (!this.user?.userId) {
				this.$router.push('/login');
				return;
			}
			
			this.deliveryAddress = this.$getLocalStorage(this.user.userId);
			
			// 查询当前商家
			await this.fetchBusiness();
			
			// 查询当前用户在购物车中的当前商家食品列表
			await this.fetchCart();
		},
		computed: {
			totalPrice() {
				let totalPrice = 0;
				for (let cartItem of this.cartArr) {
					if (cartItem.food && cartItem.food.foodPrice) {
						totalPrice += cartItem.food.foodPrice * cartItem.quantity;
					}
				}
				totalPrice += this.business.deliveryPrice || 0;
				return totalPrice.toFixed(2);
			}
		},
		methods: {
			// 获取商家信息
			async fetchBusiness() {
				try {
					const response = await this.$axios.get(`/api/businesses/${this.businessId}`);
					
					if (response.data.success) {
						this.business = response.data.data || {};
					} else {
						console.error('获取商家信息失败:', response.data.message);
						this.business = {};
						alert('获取商家信息失败: ' + response.data.message);
					}
				} catch (error) {
					console.error('获取商家信息失败:', error);
					this.business = {};
					this.handleApiError(error, '获取商家信息');
				}
			},
			
			// 获取购物车数据
			async fetchCart() {
				try {
					const response = await this.$axios.get('/api/carts', {
						params: {
							userId: this.user.userId
						}
					});
					
					if (response.data.success) {
						// 过滤当前商家的购物车项
						this.cartArr = (response.data.data || []).filter(item => 
							item.business && item.business.id == this.businessId
						);
						
						if (this.cartArr.length === 0) {
							alert('购物车为空，请先添加商品');
							this.$router.back();
						}
					} else {
						console.error('获取购物车失败:', response.data.message);
						this.cartArr = [];
						alert('获取购物车失败: ' + response.data.message);
					}
				} catch (error) {
					console.error('获取购物车失败:', error);
					this.cartArr = [];
					this.handleApiError(error, '获取购物车');
				}
			},
			
			// 跳转到地址管理页面
			toUserAddress() {
				this.$router.push({
					path: '/userAddress',
					query: {
						businessId: this.businessId
					}
				});
			},
			
			// 创建订单并跳转到支付页面
			async toPayment() {
				if (this.isCreatingOrder) return;
				
				if (!this.deliveryAddress) {
					alert('请选择送货地址！');
					return;
				}
				
				if (this.cartArr.length === 0) {
					alert('购物车为空，请先添加商品');
					return;
				}
				
				this.isCreatingOrder = true;
				
				try {
					// 创建订单数据
					const orderData = {
						customer: {
							id: this.user.userId,
							username: this.user.username
						},
						business: {
							id: this.businessId,
							businessName: this.business.businessName
						},
						orderTotal: parseFloat(this.totalPrice),
						deliveryAddress: {
							id: this.deliveryAddress.id,
							contactName: this.deliveryAddress.contactName,
							contactSex: this.deliveryAddress.contactSex,
							contactTel: this.deliveryAddress.contactTel,
							address: this.deliveryAddress.address,
							customer: {
								id: this.user.userId,
								username: this.user.username
							}
						},
						orderState: 0 // 待支付状态
					};
					
					const response = await this.$axios.post('/api/orders', orderData, {
						headers: {
							'Content-Type': 'application/json'
						}
					});
					
					if (response.data.success) {
						const orderId = response.data.data?.id;
						if (orderId) {
							// 跳转到支付页面
							this.$router.push({
								path: '/payment',
								query: {
									orderId: orderId
								}
							});
						} else {
							alert('创建订单失败：未返回订单ID');
						}
					} else {
						alert('创建订单失败: ' + (response.data.message || ''));
					}
				} catch (error) {
					console.error('创建订单失败:', error);
					this.handleApiError(error, '创建订单');
				} finally {
					this.isCreatingOrder = false;
				}
			},
			
			// 统一的API错误处理方法
			handleApiError(error, operation) {
				console.error(`${operation}失败:`, {
					message: error.message,
					status: error.response?.status,
					data: error.response?.data
				});
				
				if (error.response?.status === 500) {
					alert('服务器内部错误，请稍后再试');
				} else if (error.response?.status === 404) {
					alert('请求的资源不存在');
				} else if (error.response?.status === 401) {
					alert('用户未登录或会话已过期');
					this.$router.push('/login');
				} else if (error.response?.data?.message) {
					alert(`${operation}失败: ${error.response.data.message}`);
				} else {
					alert(`${operation}失败，请检查网络连接`);
				}
			},
			
			// 图片加载错误处理
			handleImageError(e) {
				e.target.src = this.defaultFoodImg;
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 订单信息部分 ******************/
	.wrapper .order-info {
		width: 100%;
		margin-top: 12vw;
		background-color: #0097EF;
		box-sizing: border-box;
		padding: 2vw;
		color: #fff;
	}

	.wrapper .order-info h5 {
		font-size: 3vw;
		font-weight: 300;
	}

	.wrapper .order-info .order-info-address {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
		user-select: none;
		cursor: pointer;
		margin: 1vw 0;
	}

	.wrapper .order-info .order-info-address p {
		width: 90%;
		font-size: 5vw;
	}

	.wrapper .order-info .order-info-address i {
		font-size: 6vw;
	}

	.wrapper .order-info p {
		font-size: 3vw;
	}

	.wrapper h3 {
		box-sizing: border-box;
		padding: 3vw;
		font-size: 4vw;
		color: #666;
		border-bottom: solid 1px #DDD;
		background-color: #fff;
		margin: 0;
	}

	/****************** 订单明细部分 ******************/
	.wrapper .order-detailed {
		width: 100%;
		background-color: #fff;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wrapper .order-detailed li {
		width: 100%;
		height: 16vw;
		box-sizing: border-box;
		padding: 3vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1px #EEE;
	}

	.wrapper .order-detailed li .order-detailed-left {
		display: flex;
		align-items: center;
	}

	.wrapper .order-detailed li .order-detailed-left img {
		width: 10vw;
		height: 10vw;
		border-radius: 1vw;
		object-fit: cover;
	}

	.wrapper .order-detailed li .order-detailed-left p {
		font-size: 3.5vw;
		margin-left: 3vw;
	}

	.wrapper .order-detailed li p {
		font-size: 3.5vw;
		font-weight: 500;
	}

	.wrapper .order-deliveryfee {
		width: 100%;
		height: 16vw;
		box-sizing: border-box;
		padding: 3vw;
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 3.5vw;
		background-color: #fff;
		border-bottom: solid 1px #EEE;
	}

	/****************** 订单合计部分 ******************/
	.wrapper .total {
		width: 100%;
		height: 14vw;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
	}

	.wrapper .total .total-left {
		flex: 2;
		background-color: #505051;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .total .total-right {
		flex: 1;
		background-color: #38CA73;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s;
	}

	.wrapper .total .total-right:hover {
		background-color: #2db863;
	}
</style>